<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../../../build/css/onsenui.css"/>
    <link rel="stylesheet" href="../../../../../build/css/onsen-css-components.css"/>

    <script src="../../../../../build/js/onsenui.js"></script>
    <script src="../../../node_modules/angular/angular.js"></script>
    <script src="../../../../../build/js/angular-onsenui.js"></script>
    <script>
      ons.bootstrap()

      .controller('CarouselController', function($scope) {
          $scope.currentIndex = 0;

          $scope.changed = function($event) {
            $scope.currentIndex = $event.activeIndex;
          };
      });
    </script>
  </head>
  <body>
    <ons-page ng-controller="CarouselController">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button id="prev" ng-click="carousel.prev()">Previous</ons-toolbar-button>
        </div>
        <div class="center" id="current-index">
          {{ currentIndex }}
        </div>
        <div class="right">
          <ons-toolbar-button id="next" ng-click="carousel.next()">Next</ons-toolbar-button>
        </div>
      </ons-toolbar>
      <ons-carousel ons-postchange="changed($event)" fullscreen var="carousel" swipeable overscrollable auto-scroll>
        <div>
          <ons-carousel-item id="first-item" style="background-color: red;"></ons-carousel-item>
          <ons-carousel-item id="second-item" style="background-color: blue;"></ons-carousel-item>
        </div>
      </ons-carousel>
    </ons-page>
  </body>
</html>
